<p>This rule raises an issue when <code>this</code> is assigned to a variable.</p>
<h2>Why is this an issue?</h2>
<p>Assigning <code>this</code> to a variable is an outdated JavaScript pattern that creates unnecessary complexity and reduces code readability.</p>
<p>In JavaScript, the value of <code>this</code> depends on how a function is called. Before ES6, developers commonly assigned <code>this</code> to a
variable (like <code>self</code>, <code>that</code>, or <code>foo</code>) to preserve the context when calling functions where <code>this</code> would
have a different value.</p>
<p>This pattern has several drawbacks:</p>
<ul>
  <li> It creates additional variables that clutter the scope </li>
  <li> It can cause confusion about which context is being referenced </li>
  <li> It makes the code harder to understand and maintain </li>
  <li> It’s prone to errors if the wrong variable is used </li>
</ul>
<p>Modern JavaScript provides better alternatives that eliminate the need for this pattern. Arrow functions automatically preserve the lexical
<code>this</code> binding, meaning they inherit <code>this</code> from the enclosing scope. The <code>Function.prototype.bind()</code> method can also
explicitly set the <code>this</code> value for regular functions.</p>
<h3>What is the potential impact?</h3>
<p>This issue affects code maintainability and readability. While not a security vulnerability, it can lead to bugs if developers accidentally use the
wrong variable reference or if the captured <code>this</code> value becomes stale. Using modern alternatives makes the code more predictable and
easier to understand.</p>
<h3>How to fix?</h3>
<p>Replace the variable assignment and function call with an arrow function that preserves the lexical <code>this</code> binding.</p>
<h4>Non-compliant code example</h4>
<pre data-diff-id="1" data-diff-type="noncompliant">
const foo = this;

setTimeout(function () {
	foo.bar(); // Noncompliant
}, 1000);
</pre>
<h4>Compliant code example</h4>
<pre data-diff-id="1" data-diff-type="compliant">
setTimeout(() =&gt; {
	this.bar();
}, 1000);
</pre>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/sindresorhus/eslint-plugin-unicorn#readme">eslint-plugin-unicorn</a> - Rule <a
  href="https://github.com/sindresorhus/eslint-plugin-unicorn/blob/HEAD/docs/rules/no-this-assignment.md">no-this-assignment</a> </li>
  <li> MDN - Arrow Functions - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Comprehensive
  guide to arrow functions and lexical this binding</a> </li>
  <li> MDN - Function.prototype.bind() - <a
  href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind">Documentation for the bind() method to
  explicitly set function context</a> </li>
  <li> MDN - this keyword - <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this">Complete reference for
  understanding this binding in JavaScript</a> </li>
</ul>
